<template>
  <div class="script-source-of-template">
    <jb-form-item
      class="script-source-item"
      :label="$t('脚本来源')"
      required>
      <bk-radio-group
        :value="sourceType"
        @change="handleScriptSourceChange">
        <bk-radio-button value="local">
          {{ $t('手工录入') }}
        </bk-radio-button>
        <bk-radio-button value="refer">
          {{ $t('脚本引用') }}
        </bk-radio-button>
      </bk-radio-group>
    </jb-form-item>
  </div>
</template>
<script>
  import _ from 'lodash';

  import TaskStepModel from '@model/task/task-step';


  const ScriptTypes = () => [['bash', '.sh'], ['python', '.py'], ['python3', '.py']];
  export default {
    props: {
      // 脚本来源字段名
      scriptSourceField: {
        type: String,
        required: true,
      },
      // 脚本id字段名
      scriptIdField: {
        type: String,
        required: true,
      },
      // 脚本版本id字段名
      scriptVersionIdField: {
        type: String,
      },
      // 脚本内容字段名
      contentField: {
        type: String,
        required: true,
      },
      languageField: {
        type: String,
        required: true,
      },
      // 脚本语言字段名
      scriptStatusField: {
        type: String,
        required: true,
      },
      formData: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        sourceType: 'local',
      };
    },

    watch: {
      formData: {
        handler() {
          this.initScriptSource();
        },
        immediate: true,
      },

    },

    methods: {
      /**
       * @desc 初始化脚本来源
       */
      initScriptSource() {
        if (this.formData[this.scriptSourceField] === TaskStepModel.scriptStep.TYPE_SOURCE_LOCAL) {
          this.sourceType = 'local';
          return;
        }
        this.sourceType = 'refer';

        console.log('4、', this.formData);
      },

      /**
       * @desc 更新脚本来源
       * @param {String} source 脚本来源
       */
      handleScriptSourceChange(source) {
        // 脚本来源改变重置脚本相关的信息
        const scriptSource = source === 'local'
          ? TaskStepModel.scriptStep.TYPE_SOURCE_LOCAL
          : TaskStepModel.scriptStep.TYPE_SOURCE_BUSINESS;
        this.$emit('on-reset', {
          [this.scriptIdField]: '',
          [this.scriptVersionIdField]: '',
          [this.scriptSourceField]: scriptSource,
        });
      },


    },
  };
</script>
<style lang='postcss'>
.script-source-of-template {
  .script-source-item {
    .bk-radio-button-text {
      width: 120px;
      text-align: center;
    }
  }
}

</style>
